import React, { FC } from 'react'
import { Space, Button, Tooltip } from 'antd'
import { useDispatch } from 'react-redux'
import {
    DeleteOutlined,
    EyeInvisibleOutlined,
    LockOutlined,
    CopyOutlined,
    BlockOutlined,
    UpOutlined,
    DownOutlined,
    UndoOutlined,
    RedoOutlined,
} from '@ant-design/icons'
import { ActionCreators as UndoActionCreators } from 'redux-undo'
import {
    removeComponent,
    invisibleComponent,
    toggleComponentLocked,
    copySelectedComponent,
    pasteSelectedComponent,
    moveComponent,
} from '../../../../store/componentsReducer'
import useGetComponentInfo from '../../../../hooks/useGetComponentInfo'

const EditToolbar: FC = () => {
    const dispatch = useDispatch()
    const { selectedId, componentsList, selectedComponent, copiedComponent } = useGetComponentInfo()
    const { isLocked } = selectedComponent || {}
    const len = componentsList.length
    const selectedIndex = componentsList.findIndex(c => c.fe_id === selectedId)
    const isFirst = selectedIndex <= 0 // 当前组件是第一个
    const isLast = selectedIndex >= len - 1 // 当前组件是最后一个
    /**
     * 删除当前选中的组件
     */
    const handleDelete = () => {
        dispatch(removeComponent())
    }
    /**
     * 隐藏当前选中的组件
     */
    const handleInvisible = () => {
        dispatch(invisibleComponent({ isHidden: true, fe_id: selectedId }))
    }
    /**
     * 锁定当前选中的组件
     */
    const handleToggleComponentLocked = () => {
        dispatch(toggleComponentLocked({ fe_id: selectedId }))
    }
    /**
     * 复制当前选中的组件
     */
    const handleCopy = () => {
        dispatch(copySelectedComponent())
    }
    /**
     * 粘贴当前选中的组件
     * 判断是否已经有复制的组件需要粘贴
     */
    const handlePaste = () => {
        dispatch(pasteSelectedComponent())
    }
    /**
     * 将当前组件位置向上移动
     */
    const handleMoveUp = () => {
        if (isFirst) return
        dispatch(moveComponent({ oldIndex: selectedIndex, newIndex: selectedIndex - 1 }))
    }
    /**
     * 将当前组件位置向下移动
     */
    const handleMoveDown = () => {
        if (isLast) return
        dispatch(moveComponent({ oldIndex: selectedIndex, newIndex: selectedIndex + 1 }))
    }
    /**
     * 撤销事件
     */
    const handleUndo = () => {
        dispatch(UndoActionCreators.undo())
    }
    /**
     * 恢复事件
     */
    const handleRedo = () => {
        dispatch(UndoActionCreators.redo())
    }
    return (
        <div>
            <Space>
                <Tooltip title="删除">
                    <Button
                        shape="circle"
                        icon={<DeleteOutlined />}
                        onClick={handleDelete}
                    ></Button>
                </Tooltip>
                <Tooltip title="隐藏">
                    <Button
                        shape="circle"
                        icon={<EyeInvisibleOutlined />}
                        onClick={handleInvisible}
                    ></Button>
                </Tooltip>
                <Tooltip title="锁定">
                    <Button
                        shape="circle"
                        type={isLocked ? 'primary' : 'default'}
                        icon={<LockOutlined />}
                        onClick={handleToggleComponentLocked}
                    ></Button>
                </Tooltip>
                <Tooltip title="复制">
                    <Button shape="circle" icon={<CopyOutlined />} onClick={handleCopy}></Button>
                </Tooltip>
                <Tooltip title="粘贴">
                    <Button
                        shape="circle"
                        icon={<BlockOutlined />}
                        onClick={handlePaste}
                        disabled={copiedComponent == null}
                    ></Button>
                </Tooltip>
                <Tooltip title="上移">
                    <Button
                        shape="circle"
                        icon={<UpOutlined />}
                        onClick={handleMoveUp}
                        disabled={isFirst}
                    ></Button>
                </Tooltip>
                <Tooltip title="下移">
                    <Button
                        shape="circle"
                        icon={<DownOutlined />}
                        onClick={handleMoveDown}
                        disabled={isLast}
                    ></Button>
                </Tooltip>
                <Tooltip title="撤销">
                    <Button shape="circle" icon={<UndoOutlined />} onClick={handleUndo}></Button>
                </Tooltip>
                <Tooltip title="恢复">
                    <Button shape="circle" icon={<RedoOutlined />} onClick={handleRedo}></Button>
                </Tooltip>
            </Space>
        </div>
    )
}
export default EditToolbar
